<%--
  Created by IntelliJ IDEA.
  User: 86135
  Date: 2023/3/28
  Time: 10:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改密码</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/semantic.min.css">
    <script src="${pageContext.request.contextPath}/statics/js/semantic.min.js"></script>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        body{
            font-size: 18px;
            background-image: url("${pageContext.request.contextPath}/statics/images/bg.png");
        }
    </style>
</head>
<body>
<div class="center" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)">
    <form id="userForm" name="userForm" method="post" action="${pageContext.request.contextPath}/account/updatePassword">
        <input type="hidden" name="PWD" id="PWD" value="${requestScope.oldPassword}">
        <div>
            <p>
                <label for="oldPassword">旧密码：</label>
                <input type="password" name="oldPassword" id="oldPassword" onblur="oldPwd()" style="text-align:center;border-radius: 5px;border-color:green;border-width: 2px;width: 150px;height: 30px">
                <span id="oldInfo"><font color="red">*</font></span>
            </p>
        </div>
        <div style="margin-top: 20px;">
            <p>
                <label for="newPassword">新密码：</label>
                <input type="password" name="newPassword" id="newPassword" onblur="newPwd()" style="text-align:center;border-radius: 5px;border-color:green;border-width: 2px;width: 150px;height: 30px">
                <span id="newInfo"><font color="red">*</font></span>
            </p>
        </div>
        <div style="margin-top: 20px;">
            <p>
                <label for="reNewPassword">确认新密码：</label>
                <input type="password" name="reNewPassword" id="reNewPassword" onblur="reNewPwd()" style="text-align:center;border-radius: 5px;border-color:green;border-width: 2px;width: 150px;height: 30px;">
                <span id="reNewInfo"><font color="red">*</font></span>
            </p>
        </div>
        <div style="margin-top: 10px;">
            <label class="checkbox">
                <input type="checkbox" onclick="onDisplay(this.checked)" style="margin-left: 36%;margin-top: 15px;"><i></i>显示密码</label>
        </div>
        <div>
            <!--<a href="#">保存</a>-->
            <input type="button" name="save" id="save" value="确定" onclick="onSave()" style="margin-left: 10%;margin-top: 20px;" class="ui primary button">
            <input type="button" value="返回" onclick="Return()" class="ui toggle button" style="margin-left: 25%"/>
        </div>
    </form>
</div>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script>
    var imgYes = "<img width='15px' src=${pageContext.request.contextPath}/account/readChangePhoto?str=y />";
    var imgNo = "<img width='15px' src=${pageContext.request.contextPath}/account/readChangePhoto?str=n />";

    function validateTip(element,css,tipString,status){
        element.css(css);
        element.html(tipString);
        element.prev().attr("validateStatus",status);
    }

    function oldPwd() {
        var PWD = $("#PWD").val();
        var oldPassword = $("#oldPassword").val();
        if (PWD == oldPassword){
            validateTip($("#oldInfo"),{"color":"green"},imgYes,true);
        }else if(oldPassword == ""){//旧密码输入不正确
            validateTip($("#oldInfo"),{"color":"red"},imgNo + " 请输入密码!",false);
        }else if(PWD != oldPassword){//旧密码输入为空
            validateTip($("#oldInfo"),{"color":"red"},imgNo + " 原密码不正确!",false);
        }
    }

    function newPwd() {
        var newPassword = $("#newPassword").val();
        if(newPassword != null && newPassword.length >= 6 && newPassword.length <= 18 ){
            validateTip($("#newInfo"),{"color":"green"},imgYes,true);
        } else if (newPassword.length < 6){
            validateTip($("#newInfo"),{"color":"red"},imgNo + " 新密码不得小于6位!",false);
        } else if (newPassword.length > 18){
            validateTip($("#newInfo"),{"color":"red"},imgNo + " 新密码不得大于18位！",false);
        }
    }

    function reNewPwd() {
        var newPassword = $("#newPassword").val();
        var reNewPassword = $("#reNewPassword").val();
        if(newPassword == reNewPassword){
            validateTip($("#reNewInfo"),{"color":"green"},imgYes,true);
        }else{
            validateTip($("#reNewInfo"),{"color":"red"},imgNo + " 两次密码输入不一致，请重新输入！",false);
        }
    }

    function onDisplay(isChecked) {
        if (isChecked) {
            $("#newPassword").prop("type", 'text');
            $("#reNewPassword").prop("type", 'text');
        } else {
            $("#newPassword").prop("type", 'password');
            $("#reNewPassword").prop("type", 'password');
        }
    }

    function onSave(){
        var oldPassword = $("#oldPassword");
        var newPassword = $("#newPassword");
        var reNewPassword = $("#reNewPassword");

        oldPassword.blur();
        newPassword.blur();
        reNewPassword.blur();
        if(oldPassword.attr("validateStatus") == "true"
            && newPassword.attr("validateStatus") == "true"
            && reNewPassword.attr("validateStatus") == "true"){
            if(confirm("确定要修改密码？")){
                $("#userForm").submit();
            }
        }
    }

    function Return(){
        window.location = "${pageContext.request.contextPath}/user/index"
    }
</script>
</body>
</html>

